<template>
  <div class="features">
    <div class="container">
      <h2 class="section-title">小岛屿四大核心功能</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-handshake">1</i>
          </div>
          <h3>轻松社交场</h3>
          <p>认识新朋友，就这么简单</p>
          <div class="feature-tag">零压力，先开口也不尴尬</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-coins">2</i>
          </div>
          <h3>爱好能赚钱</h3>
          <p>每一份特长，都能轻松变现</p>
          <div class="feature-tag">把热爱写进简历，也写进钱包</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-camera">3</i>
          </div>
          <h3>动态晒生活</h3>
          <p>随手发动态，吸引同频伙伴</p>
          <div class="feature-tag">生活有光，就有人追光而来</div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-radar">4</i>
          </div>
          <h3>精准找伙伴</h3>
          <p>兴趣雷达一扫，同频伙伴秒到</p>
          <div class="feature-tag">3秒扫描，0句废话，直接碰到灵魂同款</div>
        </div>
      </div>

      <!-- 详细功能描述 -->
      <div class="feature-details">
        <div class="feature-detail-item">
          <div class="detail-content">
            <h3>轻松社交场</h3>
            <p class="feature-slogan">「零压力，先开口也不尴尬」</p>
            <p>
              把"你好"说得轻松一点，是小岛屿的第一守则。在小岛屿，打招呼不需要勇气，只需要点击。让"社恐"先一步被系统治愈，把尴尬留给海风。
            </p>
            <ul class="detail-list">
              <li>
                <strong>AI 破冰卡：</strong
                >根据你的星座/爱好/最近歌单，3秒生成专属开场白，复制即可发送
              </li>
              <li>
                <strong>1:1 浮窗聊天：</strong
                >资料卡与对话框同屏出现，边聊边瞄共同点，告别"查户口式"提问
              </li>
              <li>
                <strong>30分钟限时模式：</strong
                >半小时内双方无回应，对话自动归档，不留在列表里制造"社交尸骸"
              </li>
              <li>
                <strong>安全词库实时守护：</strong
                >辱骂/推销/骚扰关键词即刻屏蔽，对方消息秒变"***"，轻松一点即可举报
              </li>
            </ul>
          </div>
          <div class="detail-visual">
            <img src="/images/screenshot/1.jpg" alt="轻松社交场" loading="lazy" />
          </div>
        </div>

        <div class="feature-detail-item reverse">
          <div class="detail-content">
            <h3>爱好能赚钱</h3>
            <p class="feature-slogan">「把热爱写进简历，也写进钱包」</p>
            <p>
              你会的，就是别人愿意付费的。把兴趣活成副业，再把副业活成底气。在小岛屿，每一份热爱都能被标价，被尊重，被庆祝。
            </p>
            <ul class="detail-list">
              <li>
                <strong>技能橱窗：</strong
                >摄影、穿搭、塔罗、游戏陪玩……30秒发布"我能做什么"，平台自动匹配需求
              </li>
              <li>
                <strong>定价小助手：</strong
                >参考同类服务均价+你的经验值，给出建议区间，告别"不会开价"
              </li>
              <li>
                <strong>escrow资金保障：</strong
                >需求方先付款，平台托管；服务完成且双方确认后收益秒到账，无追账烦恼
              </li>
              <li>
                <strong>成长等级徽章：</strong
                >完成1单→"初露锋芒"，完成100单→"领域大神"，等级越高，首页推荐权重越高
              </li>
              <li>
                <strong>提现0手续费：</strong
                >收益可1元提现至微信/支付宝，让第一笔"爱好收入"秒变红包
              </li>
            </ul>
          </div>
          <div class="detail-visual">
            <img src="/images/screenshot/2.jpg" alt="爱好能赚钱" loading="lazy" />
          </div>
        </div>

        <div class="feature-detail-item">
          <div class="detail-content">
            <h3>动态晒生活</h3>
            <p class="feature-slogan">「生活有光，就有人追光而来」</p>
            <p>
              记录不是为了炫耀，是为了让相同频率找到你。在小岛屿，每一次"随手发"，都是向世界发出暗号：我在这里，你呢？
            </p>
            <ul class="detail-list">
              <li>
                <strong>无滤镜压力：</strong
                >支持9张原图+15秒原声视频，"live"即真实
              </li>
              <li>
                <strong>情绪标签一键匹配：</strong>#今天也很努力 #深夜emo
                #OOTD，点标签即可滑到相似心情的人
              </li>
              <li>
                <strong>动态问答挂件：</strong
                >在动态里贴1个问题，比如"哪本书陪你度过低谷？"——评论区自动沉淀同好清单
              </li>
              <li>
                <strong>仅同频可见：</strong
                >可设置"只有90%爱好匹配度以上的人"刷到这条，为"小众"保驾护航
              </li>
              <li>
                <strong>回忆日历：</strong
                >365天后，系统把你这条动态做成"去年今日"明信片，可一键重新发布，形成温暖闭环
              </li>
            </ul>
          </div>
          <div class="detail-visual">
            <img src="/images/screenshot/3.jpg" alt="动态晒生活" loading="lazy" />
          </div>
        </div>

        <div class="feature-detail-item reverse">
          <div class="detail-content">
            <h3>精准找伙伴</h3>
            <p class="feature-slogan">「3秒扫描，0句废话，直接碰到灵魂同款」</p>
            <p>
              世界很大，频率对了，距离就会缩小。在小岛屿，打开兴趣雷达，让每一次相遇都像是系统偷偷安排的惊喜。
            </p>
            <ul class="detail-list">
              <li>
                <strong>兴趣雷达：</strong>一次性pick
                10个标签（音乐/运动/二次元/搞钱/户外…），算法1:1生成"同频值"
              </li>
              <li>
                <strong>雷达地图：</strong
                >滑动即可看见附近5km内"同频值>80%"的人，头像亮度=匹配度，一眼锁定
              </li>
              <li>
                <strong>深度问卷模式：</strong
                >30道心理&价值观选择题，完成后解锁"灵魂匹配报告"，可一键分享
              </li>
              <li>
                <strong>多人语音局：</strong
                >6人匹配度>75%的"同频局"，AI主持+破冰小游戏，20分钟自由散场，不强制加好友
              </li>
              <li>
                <strong>防骚扰阈值：</strong
                >若对方连续3次被拒绝仍发起对话，系统将自动降低其推荐权重，保护你的"雷达清净度"
              </li>
            </ul>
          </div>
          <div class="detail-visual">
            <img src="/images/screenshot/4.jpg " alt="精准找伙伴" loading="lazy" />
          </div>
        </div>
      </div>

      <!-- CTA 行动召唤区域 -->
      <div class="cta-section">
        <div class="cta-content">
          <h3>立即上岛，让每一座小岛屿都不再是一座孤岛</h3>
          <div class="cta-buttons">
            <button class="cta-button primary">
              <i class="fas fa-download"></i>
              下载 App
            </button>
            <button class="cta-button secondary">
              <i class="fas fa-book"></i>
              查看上岛指南
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入必要的库和组件
import { ref } from "vue";
</script>

<style scoped>
/* 特性页面基本样式 */
.features {
  margin-top: var(--spacing-3xl);
  touch-action: pan-y;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  );
  border-radius: 2px;
}

/* 特性卡片网格 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
}

.feature-card {
  background: var(--text-light);
  padding: var(--spacing-xl);
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: rgba(66, 184, 131, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: 2rem;
  color: var(--primary-color);
}

.feature-card h3 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.feature-card p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.feature-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(66, 184, 131, 0.1);
  color: var(--primary-color);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 500;
}

/* 详细特性描述 */
.feature-details {
  margin-top: var(--spacing-xxl);
}

.feature-detail-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xxl);
}

.feature-detail-item.reverse {
  flex-direction: row-reverse;
}

.detail-content {
  flex: 1;
}

.detail-content h3 {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.detail-content p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.feature-slogan {
  font-size: var(--font-lg);
  color: var(--primary-color);
  font-style: italic;
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.detail-list {
  list-style: none;
  padding: 0;
}

.detail-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.detail-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

.detail-visual {
  flex: 1;
  background: var(--text-light);
  border-radius: 12px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.detail-visual img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* CTA 行动召唤区域 */
.cta-section {
  background: linear-gradient(
    135deg,
    rgba(66, 184, 131, 0.1) 0%,
    rgba(66, 184, 131, 0.05) 100%
  );
  padding: var(--spacing-xxl) 0;
  margin-top: var(--spacing-xxl);
  border-radius: 16px;
  text-align: center;
}

.cta-content h3 {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
  line-height: 1.4;
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: 50px;
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 160px;
  justify-content: center;
}

.cta-button.primary {
  background: var(--primary-color);
  color: var(--text-light);
  box-shadow: 0 4px 15px rgba(66, 184, 131, 0.3);
}

.cta-button.primary:hover {
  background: #4a9d7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 184, 131, 0.4);
}

.cta-button.secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.cta-button.secondary:hover {
  background: var(--primary-color);
  color: var(--text-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(66, 184, 131, 0.2);
}

.cta-button i {
  font-size: var(--font-lg);
}

/* 响应式设计 - 平板端 */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-title {
    font-size: var(--font-2xl);
  }

  .feature-icon {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
  }

  .detail-content h3 {
    font-size: var(--font-xl);
  }

  .feature-slogan {
    font-size: var(--font-base);
  }

  .cta-content h3 {
    font-size: var(--font-xl);
  }

  .cta-buttons {
    gap: var(--spacing-md);
  }

  .cta-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-sm);
    min-width: 140px;
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
  .features {
    padding: var(--spacing-xl) 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .section-title {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-lg);
  }

  .section-title::after {
    width: 40px;
    height: 3px;
  }

  .feature-card {
    padding: var(--spacing-lg);
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .feature-detail-item,
  .feature-detail-item.reverse {
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .detail-visual {
    min-height: 200px;
  }

  .feature-slogan {
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-sm);
  }

  .detail-list li {
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-xs);
  }

  .cta-section {
    padding: var(--spacing-xl) var(--spacing-md);
    margin-top: var(--spacing-xl);
  }

  .cta-content h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--spacing-lg);
  }

  .cta-buttons {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
  }

  .cta-button {
    width: 100%;
    max-width: 280px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-base);
  }
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
  .feature-card {
    touch-action: manipulation;
  }

  .feature-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* 优化滚动性能 */
  .features {
    will-change: transform;
  }

  /* 移动端字体优化 */
  .section-title,
  .feature-card h3,
  .detail-content h3,
  .cta-content h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 小屏幕移动端优化 */
@media (max-width: 480px) {
  .features {
    padding: var(--spacing-lg) 0;
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  .section-title {
    font-size: var(--font-lg);
  }

  .feature-card {
    padding: var(--spacing-md);
  }

  .feature-card h3 {
    font-size: var(--font-base);
  }

  .feature-card p {
    font-size: var(--font-sm);
  }

  .feature-tag {
    font-size: var(--font-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .detail-content h3 {
    font-size: var(--font-base);
  }

  .feature-slogan {
    font-size: var(--font-xs);
  }

  .detail-content p {
    font-size: var(--font-sm);
  }

  .detail-list li {
    font-size: var(--font-xs);
    padding-left: var(--spacing-md);
  }

  .cta-content h3 {
    font-size: var(--font-base);
  }

  .cta-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-sm);
  }
}
</style>
